<template>
	<view>
		<view class="loanPageheader">
			<image src="../../static/leftjt.png" mode=""></image>
			<view class="jddTitle">桔多多</view>
		</view>
		<view class="loanPageProduct">
			<view class="jieMuch" style="width: 280rpx;">
				<view>借多少<text style="color: #888888;">1000-50000元</text></view>
				<view class="jieNum">7000</view>
			</view>
			<view class="jieMuch" style="float: right;margin-right: 5rpx;">
				<view class="">借多久<text style="color: #888888;">6-12月</text></view>
				<view class="jieNum">12</view>
				<image src="../../static/bottom.png" mode=""></image>
			</view>
			<view class="ProductDtaile"></view>
			<view class="daozhangBox">
				<view class="daozhangCash" style="border-right: 1rpx solid #888888;">
					<view>预估到账</view>
					<view class="daozhangCashNum">7000<text style="font-size: 30rpx;">元</text></view>
				</view>
				<view class="daozhangCash">
					<view>预估每期还款</view>
					<view class="daozhangCashNum">703<text style="font-size: 30rpx;">元</text></view>
				</view>
				<view class="feilv">费率36%/年，最快放贷5分钟</view>
			</view>
			<view class="searchProductDetaile">查看产品详情</view>
		</view>
		<view style="padding: 72rpx 50rpx 61rpx 50rpx;">
			<view class="bitiandata">必填资料</view>
			<view class="bitiandata-infor">完成填写的用户，92.9%的人贷款成功</view>
			<view class="bitiandata-fuyong">
				可复用的产品
				<image src="../../static/Right.png" mode=""></image>
			</view>
			<view class="jibenInforBox">
				<view class="jibenInfor">基本信息</view>
				<view class="comerenzhen">去认证</view>
			</view>
			<view class="jibenInforBox">
				<view class="jibenInfor">实名认证</view>
				<view class="comerenzhen">去认证</view>
			</view>
			<view class="jibenInforBox">
				<view class="jibenInfor">紧急联系人</view>
				<view class="comerenzhen">去认证</view>
			</view>
		</view>
		<view class="agreeXieyi">
			<image src="../../static/agree.png" mode=""></image>
			<view class="agreeXieyiTxt">同意<text>《机构授权协议》</text></view>
		</view>
		<view class="nextOneBox">
			<image src="../../static/shoucang.png" mode=""></image>
			<view class="nextOne">下一步</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	/* page{
		background: #F8F8F8;
	} */
	.loanPageheader {
		width: 100%;
		height: 311rpx;
		background: linear-gradient(180deg, #DFAD7B, #DFBA94, #F1E3D5, #FFFFFF);
	}
	.loanPageheader image{
		width: 34rpx;
		height: 28rpx;
		display: inline-block;
		margin-left: 28rpx;
	}
	.jddTitle{
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		padding-top: 81rpx;
		display: inline-block;
		margin-left: 258rpx;
	}
	.loanPageProduct {
		width: 614rpx;
		height: 384rpx;
		background: #FFFFFF;
		box-shadow: 0 3rpx 10rpx 0 rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		margin: -130rpx auto 0 auto;
		font-family: PingFang SC;
		padding: 40rpx;
	}
	.jieMuch {
		font-size: 28rpx;
		font-weight: bold;
		display: inline-block;
	}
	.jieNum {
		font-size: 60rpx;
		line-height: 70rpx;
		display: inline-block;
		vertical-align: middle;
	}
	.jieMuch image {
		width: 33rpx;
		height: 18rpx;
		display: inline-block;
		vertical-align: middle;
		margin-left: 71rpx;
	}
	.ProductDtaile {
		margin-top: 30rpx;
		border-top: 1rpx solid #E4E4E4;
	}
	.daozhangBox {
		width: 596rpx;
		height: 165rpx;
		background: #F2F2F2;
		border-radius: 10rpx;
		margin: 30rpx auto 0 auto;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
		padding: 20rpx auto 15rpx auto;
	}
	.daozhangCash {
		display: inline-block;
		width: 266rpx;
		font-size: 28rpx;
		margin: 20rpx 0 0 30rpx;
	}
	.daozhangCashNum{
		font-size: 45rpx;
	}
	.feilv{
		font-size: 26rpx;
		line-height: 40rpx;
		margin-left: 32rpx;
	}
	.searchProductDetaile{
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		line-height: 80rpx;
		text-align: center;
	}
	.bitiandata{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 36rpx;
	}
	.bitiandata-infor{
		font-size: 24rpx;
		font-weight: 500;
		color: #888888;
		line-height: 48rpx;
		display: inline-block;
	}
	.bitiandata-fuyong{
		font-size: 24rpx;
		font-weight: 500;
		color: #888888;
		line-height: 48rpx;
		display: inline-block;
		margin-left: 40rpx;
	}
	.bitiandata-fuyong image{
		margin-left: 10rpx;
		width: 13rpx;
		height: 23rpx;
	}
	.jibenInforBox{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 80rpx;
	}
	.jibenInfor{
		display: inline-block;
	}
	.comerenzhen{
		width: 116rpx;
		height: 45rpx;
		background: #F8F8F8;
		border-radius: 23rpx;
		font-size: 30rpx;
		color: #DFAF7F;
		line-height: 45rpx;
		display: inline-block;
		float: right;
		margin-top: 20rpx;
	}
	.agreeXieyi{
		text-align: center;
		height: 124rpx;
		background: #F8F8F8;
		line-height: 124rpx;
	}
	.agreeXieyi image{
		width: 23rpx;
		height: 23rpx;
		display: inline-block;
	}
	.agreeXieyiTxt{
		font-size: 24rpx;
		color: #888888;
		display: inline-block;
		margin-left: 10rpx;
	}
	.nextOneBox{
		width:100%;
		height: 145rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
	}
	.nextOneBox image{
		width: 53rpx;
		height: 85rpx;
		margin: 25rpx 38rpx 0 54rpx;
		display: inline-block;
		vertical-align: middle;
	}
	.nextOne{
		width: 550rpx;
		height: 105rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 110rpx;
		display: inline-block;
		background: #DFB78F;
		border-radius: 50rpx;
		text-align: center;
		vertical-align: middle;
		margin-top: 25rpx;
	}
</style>
